<!--
* @author wn
* @date 2022/11/14 14:53:26
* @description: 左侧 菜单 组件  el-menu 右侧有一条边框
!-->
<template>
	<el-menu
		class="el-menu-vertical"
		v-if="noChildren"
		background-color="#545c64"
		text-color="#fff"
		:default-active="$route.path"
		active-text-color="#ffd04b"
		:default-openeds="[hasChildren[0].path]"
		:collapse="$store.state.common.isCollapse"
		router
	>
		<div class="hide">
			<el-icon v-if="$store.state.common.isCollapse" :size="22">
				<Tools style="margin-right: 6px" />
			</el-icon>
			<span v-else>后台管理</span>
		</div>
		<el-menu-item
			:index="item.path"
			v-for="item in noChildren"
			:key="item.path"
		>
			<el-icon>
				<component :is="item.icon" style="margin-right: 6px" />
			</el-icon>
			<span>{{ item.label }}</span>
		</el-menu-item>
		<el-sub-menu
			:index="item.path"
			v-for="item in hasChildren"
			:key="item.path"
		>
			<template #title>
				<el-icon>
					<component :is="item.icon" style="margin-right: 6px" />
				</el-icon>
				<span>{{ item.label }}</span>
			</template>
			<el-menu-item-group
				v-for="subItem in item.children"
				:key="subItem.title"
				:title="subItem.title"
			>
				<el-menu-item
					v-for="sub in subItem.obj"
					:key="sub.path"
					:index="sub.path"
				>
					<el-icon>
						<component :is="sub.icon" style="margin-right: 6px" />
					</el-icon>
					<span>{{ sub.label }}</span>
				</el-menu-item>
			</el-menu-item-group>
		</el-sub-menu>
	</el-menu>
	<div v-else class="skeleton"></div>
</template>
<script>
import {
	HomeFilled,
	GoodsFilled,
	User,
	List,
	Edit,
	Avatar,
	Tools,
	PieChart,
} from '@element-plus/icons-vue'
import { asideList } from '@/network/constants'
import { ref } from 'vue'

export default {
	components: {
		HomeFilled,
		GoodsFilled,
		User,
		List,
		Edit,
		Avatar,
		Tools,
		PieChart,
	},
	setup() {
		const hasChildren = ref(null)
		const noChildren = ref(null)

		// 筛选出 有分组 和 没有分组的 数据
		hasChildren.value = asideList.filter(item => item.children)
		noChildren.value = asideList.filter(item => !item.children)

		return {
			hasChildren,
			noChildren,
		}
	},
}
</script>
<style scoped lang="scss">
.el-menu-vertical {
	// 重要以下就是添加menu的宽度和高度。
	min-height: calc(100vh);
	border-right: none;
	.hide {
		height: 61px;
		line-height: 61px;
		text-align: center;
		color: rgb(255, 255, 255);
		font-size: 16px;
		font-weight: 700;
		border-bottom: 1px solid #ccc;
	}
	&:not(.el-menu--collapse) {
		// 重要以下就是添加menu的宽度和高度。
		width: 200px;
	}
}
.skeleton {
	width: 200px;
	min-height: calc(100vh);
	background-color: #545c64;
}
</style>
